<template>
    <el-dialog
        :before-close="handleClose"
        :close-on-click-modal="false"
        :title="title"
        :visible.sync="dialogVisible"
        v-if="dialogVisible"
        width="63%"
    >
        <el-table
            :data="tableData"
            :fit="true"
            border
            class="ccui-multifunctional-table"
            ref="tableListAll"
            max-height="800px"
            @select="handleSelect"
            @select-all="handleSelect"
        >
            <template v-for="(table) in tableTheadOptions">
                <el-table-column
                    :fixed="table.fixed || false"
                    :key="table.id"
                    :type="table.type"
                    :label="table.label"
                    :min-width="table.width"
                    :prop="table.prop"
                    :align="table.align || 'left'"
                    :header-align="table.headerAlign || 'left'"
                    :filters="table.filters"
                    :formatter="formatterList[table.formatterName]"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
            </template>
            <slot/>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" type="default-mini" @click="resultClick('cancel')"
            >取 消
            </el-button>
            <el-button size="mini" type="primary-font-mini" @click="resultClick('confirm')"
            >确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "dialogTableSelect",
    props: {
        title: String,
        tableData: {
            type: Array,
            default: () => []
        },
        tableTheadOptions: {
            type: Array,
            default: () => []
        },
        
    },
    data() {
        return {
            formatterList: {},
            dialogVisible: false,
            selectVal: []
        }
    },
    methods: {
        handleSelect(selectVal) {
            this.selectVal = selectVal;
        },
        handleClose() {
            this.dialogVisible = false;
        },
        resultClick(type) {
            if (type === "cancel") this.dialogVisible = false;
            if (type === "confirm") {
                let val = JSON.parse(JSON.stringify(this.selectVal))
                this.$emit("dialogSelectVal", val);
                this.selectVal=[]
            }
        }
    }
}
</script>

<style scoped lang="scss">
/deep/ .el-dialog__body {
    min-height: 300px;
    overflow: visible !important;
}

/deep/ .el-table__body-wrapper {
    max-height: 370px !important;
}

/deep/ .el-table {
    /deep/ th {
        padding: 0;
        height: 36px;
        line-height: 36px;
    }
    
    .el-table__body {
        .cell {
            height: 36px;
            line-height: 36px;
        }
    }
}

.inventory {
    display: inline-block;
    
    & + .inventory {
        margin-left: 10px;
    }
}

/deep/ .revenue-code-number .el-dialog__body .el-dialog__body-bodys {
    .bodys-right {
        padding: 0;
        width: 400px;
    }
}

/deep/ .revenue-code-number .el-dialog__body {
    width: 96%;
}

/deep/ .el-table td,
.el-table th {
    padding: 0 !important;
}
/deep/ .el-col-8 {
    width: 33.33333%;
    margin-bottom: 10px;
}
/deep/ .el-search .el-searchs-box {
    width: 395px;
}
/deep/.el-search .el-date-editor.el-input,
.el-search .el-date-editor.el-input__inner,
.el-search .el-input-number,
.el-search
.el-searchs-bottom-form
.el-form-item
.el-form-item__content
.el-select {
    width: 108%;
}
/deep/ .el-button--mini {
    margin-left: 5px;
}
</style>